import { cn } from '@/utils/cn';
import { Heart, Star, Users, Clock, MapPin, Calendar } from 'lucide-react';
import { PictureBook, Activity } from '@/stores/appStore';

interface BookCardProps {
  book: PictureBook;
  onFavorite: (bookId: string) => void;
  onRead: (bookId: string) => void;
}

export function BookCard({ book, onFavorite, onRead }: BookCardProps) {
  return (
    <div className="bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
      <div className="relative">
        <img 
          src={book.coverImage} 
          alt={book.title}
          className="w-full h-48 object-cover"
        />
        <button
          onClick={() => onFavorite(book.id)}
          className={cn(
            "absolute top-3 right-3 p-2 rounded-full transition-colors",
            "bg-white/80 text-gray-400 hover:bg-white hover:text-red-500"
          )}
        >
          <Heart className="w-5 h-5" />
        </button>
        <div className="absolute bottom-3 left-3 bg-white/90 px-2 py-1 rounded-lg">
          <span className="text-sm font-medium text-gray-700">
            {book.ageRange}
          </span>
        </div>
      </div>
      
      <div className="p-4">
        <h3 className="font-bold text-lg text-gray-800 mb-2 line-clamp-2">
          {book.title}
        </h3>
        <p className="text-gray-600 text-sm mb-3 line-clamp-2">
          {book.description}
        </p>
        
        <div className="flex items-center justify-between mb-4">
          <div className="flex items-center space-x-1">
            <Star className="w-4 h-4 text-yellow-400 fill-current" />
            <span className="text-sm font-medium text-gray-700">
              {book.rating}
            </span>
            <span className="text-xs text-gray-500">
              ({book.readCount})
            </span>
          </div>
          {book.price && (
            <span className="text-lg font-bold text-primary-600">
              ¥{book.price}
            </span>
          )}
        </div>
        
        <button
          onClick={() => onRead(book.id)}
          className="w-full bg-accent-500 hover:bg-accent-600 text-white font-medium py-2 px-4 rounded-xl transition-colors"
        >
          开始阅读
        </button>
      </div>
    </div>
  );
}

interface ActivityCardProps {
  activity: Activity;
  onFavorite: (activityId: string) => void;
  onRegister: (activityId: string) => void;
}

export function ActivityCard({ activity, onFavorite, onRegister }: ActivityCardProps) {
  const formatDate = (dateString: string) => {
    const date = new Date(dateString);
    return date.toLocaleDateString('zh-CN', {
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    });
  };

  const spotsLeft = activity.spots;

  return (
    <div className="bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
      <div className="relative">
        <img 
          src={activity.image} 
          alt={activity.title}
          className="w-full h-48 object-cover"
        />
        <button
          onClick={() => onFavorite(activity.id)}
          className={cn(
            "absolute top-3 right-3 p-2 rounded-full transition-colors",
            "bg-white/80 text-gray-400 hover:bg-white hover:text-red-500"
          )}
        >
          <Heart className="w-5 h-5" />
        </button>
        <div className="absolute bottom-3 left-3 bg-accent-500 text-white px-2 py-1 rounded-lg text-sm font-medium">
          {activity.category}
        </div>
      </div>
      
      <div className="p-4">
        <h3 className="font-bold text-lg text-gray-800 mb-2 line-clamp-2">
          {activity.title}
        </h3>
        <p className="text-gray-600 text-sm mb-3 line-clamp-3">
          {activity.description}
        </p>
        
        <div className="space-y-2 mb-4">
          <div className="flex items-center text-sm text-gray-600">
            <Calendar className="w-4 h-4 mr-2 text-accent-500" />
            <span>{formatDate(activity.date)} {activity.time}</span>
          </div>
          <div className="flex items-center text-sm text-gray-600">
            <MapPin className="w-4 h-4 mr-2 text-accent-500" />
            <span className="line-clamp-1">{activity.location}</span>
          </div>
          <div className="flex items-center text-sm text-gray-600">
            <Users className="w-4 h-4 mr-2 text-accent-500" />
            <span>{activity.spots}人</span>
          </div>
        </div>
        
        <div className="flex items-center justify-between">
          <div className="text-lg font-bold text-primary-600">
            ¥{activity.price}
          </div>
          <button
            onClick={() => onRegister(activity.id)}
            disabled={spotsLeft <= 0}
            className={cn(
              "px-4 py-2 rounded-xl font-medium transition-colors",
              spotsLeft <= 0
                ? "bg-gray-200 text-gray-400 cursor-not-allowed"
                : "bg-secondary-500 hover:bg-secondary-600 text-white"
            )}
          >
            {spotsLeft <= 0 
              ? "已满员" 
              : "立即报名"
            }
          </button>
        </div>
        
        {spotsLeft <= 3 && spotsLeft > 0 && (
          <div className="mt-2 text-xs text-orange-600 font-medium">
            仅剩{spotsLeft}个名额
          </div>
        )}
      </div>
    </div>
  );
}